<template>
	<view class="f-f-c p20">
		<u-navbar
		:autoBack="true" bgColor="#fff"
		leftIconColor='#000'
		:titleStyle="{ color: '#000'}"
		 title="提现" rightText='' :border="false" :placeholder="true">
			<!-- <view slot="left"></view> -->
			<view slot="right" style="display: flex;" @click="navTo('/pagesA/user/drawList')">
				记录
			</view>
		</u-navbar>
		<view class="">
			<view class="m20 p20 b-s b-rd f-f-c p-s" >
				<view class="pt20 pb20 fb f24 c3">
					提现余额
				</view>
				<view class="pt20 pb20 fb f40 c3 f b-b">
					￥<u--input
					     v-model='amount'
						placeholder="请输入"
						border="none"
						type='number'
					  ></u--input>
				</view>
				<view class="mt10 f24 c6 f-s-b" @click="navTo('/pagesA/user/drawType')">
					<span>提现至</span>
					<span class="f" v-if="payType == 1">
						<!-- <image style="width: 40rpx;" src="https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/zfb.png" mode="widthFix"></image> -->
						<span class="f24">手机号</span>
						<u-icon name="arrow-right" color="#ccc" size="12"></u-icon>
					</span>
					<span class="f" v-if="payType == 2">
						<image style="width: 40rpx;" src="https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/wx.png" mode="widthFix"></image>
						<span class="f24">微信</span>
						<u-icon name="arrow-right" color="#ccc" size="12"></u-icon>
					</span>
					<span class="f" v-if="payType == 3">
						<image style="width: 40rpx;" src="https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/card.png" mode="widthFix"></image>
						<span class="f24">银行卡</span>
						<u-icon name="arrow-right" color="#ccc" size="12"></u-icon>
					</span>
				</view>
				
			</view>
			<view class="pl20 pr20 c9 f24">
				当前可提现{{Number(userMation.nowMoney).toFixed(2)}}元
			</view>
			<view class="m20 p20 b-s b-rd f-f-c p-s" >
				<view class="f-s-b b-b pb20" > 
					<span  class="f1 xing" >姓名</span>
					<view  style="width: 380rpx;">
						<u--input
						    style="text-align:right"
						    border="none"
						    placeholder="请输入姓名"
							placeholderClass='placeholderClass'
						    v-model="realName"
						  ></u--input>
					</view>
					
				</view>
				<view class="f-s-b pt20 b-b pb20" v-if="payType != 3">
					<span  class="f1 xing" >手机号</span>
					<view  style="width: 380rpx;">
						<u--input
						    style="text-align:right"
						    border="none"
						    placeholder="请输入手机号"
							placeholderClass='placeholderClass'
						    v-model="account"
						  ></u--input>
					</view>
					
				</view>
				<view class="f-s-b pt20 b-b pb20" v-if="payType == 3">
					<span  class="f1 xing" >银行卡名称</span>
					<view  style="width: 380rpx;">
						<u--input
						    style="text-align:right"
						    border="none"
						    placeholder="请输入银行卡"
							placeholderClass='placeholderClass'
						    v-model="bankName"
						  ></u--input>
					</view>
					
				</view>
				<view class="f-s-b pt20  pb20" v-if="payType == 3">
					<span  class="f1 xing" >银行卡账号</span>
					<view  style="width: 380rpx;">
						<u--input
						    style="text-align:right"
						    border="none"
						    placeholder="请输入银行卡账号"
							placeholderClass='placeholderClass'
						    v-model="account"
						  ></u--input>
					</view>
					
				</view>
				<view class="f-s-b pt20  pb20" v-if="payType == 3"> 
					<span  class="f1 xing" >开户行</span>
					<view  style="width: 380rpx;">
						<u--input
						    style="text-align:right"
						    border="none"
						    placeholder="请输入开户行"
							placeholderClass='placeholderClass'
						    v-model="bankSubName"
						  ></u--input>
					</view>
					
				</view>
				
				<view class="pt20" v-if="payType != 3">
					<span  class="f1 xing" >收款码</span>
					<view class="mt20 f-w">
						<view class="p-s ml20 mb20" v-if="imgUrl">
							<image style="width: 120rpx;" 
							:src="imgUrl" mode="widthFix"></image>
							<image @click="redimg()" class="p-b" 
							style="width: 36rpx;right: 0;top: -10rpx" 
							src="https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/close.png" mode="widthFix"></image>
							
						</view>
						<view class="uploadBox f-c ml20" @click="chooseImg">
							<u-icon name="plus" color="#ccc" size="32"></u-icon>
						</view>
					</view>
					
					
				</view>
			</view>
			
			<view class="sureBtn" @click="draw">
				提现
			</view>
			
		</view>
	
		
	</view>
</template>


<script>
	 export default {
		data() {
			return {
				realName:'',
				account:'',
				amount:null,
				imgUrl:'',
				payType:1,
				bankSubName:'',
				bankName:'',
				accountType:1,
				userMation:{},
				
				
			}
		},
		onReachBottom() {
			
		},
		onReady() {
			
		},
		onLoad(){
			
		},
		onShow() {
			if(uni.getStorageSync('payType')){
				this.payType = uni.getStorageSync('payType')
			}
			this.getUser()
		},
		methods: {
			getUser(){
				let that = this
				this.$api.request('get', 'user/app/getUser').then(res => {
			        this.userMation = res.data
					
				})
			},
			chooseImg(){
				this.$api.uploadImg(1,(res)=>{
					console.log(res,'imgUrl')
					this.imgUrl =res
					//uni.setStorageSync('userInfo',this.userInfo)
				})
			},
			redimg(i){
				this.imgUrl= ''
			},
			draw(){
				let that = this
				if(!this.realName ){
					this.$api.msg('请输入真实姓名')
					return
				}
				if(!this.amount ){
					this.$api.msg('请输入提现金额')
					return
				}
				let params = {
				  realName:this.realName,
				  amount:this.amount,
				  accountType:this.payType,
				  account:this.account
			    }
				    
				if(this.payType == 1){
					if(!this.account ){
						this.$api.msg('请输入账户')
						return
					}
					if(!this.imgUrl){
						this.$api.msg('请上传收款码')
						return
					}
					params.imgUrl = this.imgUrl
				}
				if(this.payType == 2){
					if(!this.account ){
						this.$api.msg('请输入账户')
						return
					}
					if(!this.imgUrl ){
						this.$api.msg('请上传收款码')
						return
					}
					
					params.imgUrl = this.imgUrl
				}
				if(this.payType == 3){
					if(!this.bankName ){
						this.$api.msg('请输入银行名称')
						return
					}
					if(!this.bankSubName ){
						this.$api.msg('请输入开户行账号')
						return
					}
					params.bankName = this.bankName
					params.bankSubName = this.bankSubName
					
				}
				console.log('222')
				// return
				this.$api.request('post', 'app/withdrawRecord',params).then(res => {
					  that.amount = null
					  that.realName = null
					  that.account = null
					  that.realName = null
					  that.bankName = null
					  that.bankSubName = null
					  that.imgUrl = null
					  that.getUser()
				      that.$api.msg('提现成功')
					
				})
			},
		}
	}
</script>

<style lang='scss'>
	page,
	.content {
		min-height: 50%;
		background-color: #f8f8f8;
	}

	.btn{
		width: 100%;
		height: 68rpx;
		background: #1AC388;
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		opacity: 1;
		border: 2rpx solid var(--theme);
		text-align: center;
		line-height: 68rpx;
		color:#fff;
	}
	.btn2{
		width: 100%;
		height: 68rpx;
		background: rgba(26,195,136,0);
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		opacity: 1;
		border: 2rpx solid var(--theme);
		text-align: center;
		line-height: 68rpx;
		color: var(--theme);
	}
	.placeholderClass{
		text-align: right;
	}

	
</style>
